import React from 'react';
import { Button } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import QueueAnim from 'rc-queue-anim';
import TweenOne, { TweenOneGroup } from 'rc-tween-one';
import BannerAnim, { Element } from 'rc-banner-anim';
import { isImg } from './utils';
import 'rc-banner-anim/assets/index.css';

const BgElement = Element.BgElement;
class Banner extends React.PureComponent {
  render() {
    return (
      <div className="banner2">
        <TweenOneGroup
          key="bannerGroup"
          enter={{ opacity: 0, type: 'from' }}
          leave={{ opacity: 0 }}
          component=""
        >
          <BannerAnim key="BannerAnim">
            <Element
              key="elem0"
              followParallax={{
                delay: 1000,
                minMove: 0.1,
                data: [
                  {
                    id: `bg0`,
                    value: 15,
                    type: 'x',
                  },
                  { id: `wrapperBlock0`, value: -15, type: 'x' },
                ],
              }}
              className="banner-user-elem"
            >
              <BgElement key="bg" className="bg bg0" id={`bg0`} />
              <div className="home-page banner2-page">
                <QueueAnim
                  type={['bottom', 'top']}
                  delay={200}
                  key="text"
                  className="banner2-text-wrapper"
                  id={`wrapperBlock0`}
                >
                  <div key="logo" className="banner2-title">
                    {typeof 'Ant Motion' === 'string' &&
                    'Ant Motion'.match(isImg) ? (
                      <img src={'Ant Motion'} width="100%" alt="img" />
                    ) : (
                      'Ant Motion'
                    )}
                  </div>
                  <div key="content" className="banner2-content">
                    一个高效的页面动画解决方案
                  </div>
                  <Button type="ghost" key="button" className="banner2-button">
                    Learn More
                  </Button>
                </QueueAnim>
              </div>
            </Element>
          </BannerAnim>
        </TweenOneGroup>
        <TweenOne
          animation={{
            y: '-=20',
            yoyo: true,
            repeat: -1,
            duration: 1000,
          }}
          className="banner2-icon"
          style={{ bottom: 40 }}
          key="icon"
        >
          <DownOutlined />
        </TweenOne>
      </div>
    );
  }
}

export default Banner;
